<template>
  <el-row :gutter="20" class="search">
    <el-col :lg="12" :md="12" :xs="24">
      <el-card>
        <div class="search-left-header">
          <h4>线上热门搜索</h4>
          <el-dropdown>
            <i class="el-icon-more" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="search-left-body">
          <el-col :lg="12" :md="12" :xs="24">
            <SearchCard title="搜索用户数" value1="123456" value2="18.2">
              <template>
                <i class="el-icon-caret-top"></i>
              </template>
              <template #searchFooter>
                <SearchChart></SearchChart>
              </template>
            </SearchCard>
          </el-col>
          <el-col :lg="12" :md="12" :xs="24">
            <SearchCard title="人均搜索次数" value1="2.7" value2="26.2">
              <template>
                <i class="el-icon-caret-bottom"></i>
              </template>
              <template #searchFooter>
                <SearchChart></SearchChart>
              </template>
            </SearchCard>
          </el-col>
          <el-table border>
            <el-table-column label="排名" width="80" />
            <el-table-column label="搜索关键词" />
            <el-table-column label="用户数" sortable />
            <el-table-column label="周涨幅" sortable />
          </el-table>
          <el-pagination layout="prev, pager, next" style="float: right" :total="1000" />
        </div>
      </el-card>
    </el-col>
    <el-col :lg="12" :md="12" :xs="24">
      <el-card>
        <div class="search-right-header">
          <h4>销售额类别占比</h4>
          <el-radio-group v-model="radio1" size="small">
            <el-radio-button label="全部渠道" />
            <el-radio-button label="线上" />
            <el-radio-button label="门店" />
          </el-radio-group>
        </div>
        <div class="search-right-body">
          <PieChart></PieChart>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import SearchCard from './components/SearchCard.vue'
import SearchChart from './components/SearchChart.vue'
import PieChart from './components/PieChart.vue'
import { mapActions } from 'vuex'
export default {
  name: 'Search',
  data() {
    return {
      radio1: '全部渠道'
    }
  },
  mounted() {
    this.getHomeList()
  },
  methods: {
    ...mapActions('home', ['getHomeList'])
  },
  components: {
    SearchCard,
    SearchChart,
    PieChart
  }
}
</script>

<style lang="scss" scoped>
.search {
  .search-left-header,
  .search-right-header {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  .search-left-body {
    padding: 0 10px;
  }
  .search-right-body {
    padding-top: 40px;
  }
  .el-icon-caret-top {
    color: red;
  }
  .el-icon-caret-bottom {
    color: aqua;
  }
}
</style>